﻿@model FrogFoot.Entities.Portal
@{
    ViewBag.Title = "Create";
}

@using (Html.BeginForm("Create", "Portals", FormMethod.Post, new { @enctype = "multipart/form-data", id = "createPortalForm" }))
{
    <div class="form-horizontal">
        <div class="row">
            <div class="col-sm-12">
                <h2>Create</h2>
                <span>Recommended image size: </span><label>1150 X 400px</label>  
                <div class="form-group">
                    <div id="uploadContainer" class="col-sm-offset-3 col-xs-9">
                        <input id="ImgInput" type="file" name="upload"/>
                    </div>
                </div>

                <div class="form-group" id="imgPreviewContainer" style="display: none;">
                    <div class="col-sm-offset-1 col-sm-8">
                        <img id="imgPreview" height="400"/>
                    </div>
                    <div class="col-sm-offset-1 col-sm-2">
                        <input id="keepCurImg" style="margin-bottom: 30px;" type="button" class="btn btn-default" value="Revert image"/>
                        <div id="imgDetails"></div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Name, new {@class = "control-label col-md-3"})
                    <div class="col-md-9">
                        @Html.TextBoxFor(model => model.Name, new {@class = "form-control", style = "display: inline;"})
                        <label style="display: inline;"> + "FTTH Portal"</label>
                        @Html.ValidationMessageFor(model => model.Name, "", new {@class = "text-danger"})
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.PrecinctCode, new {@class = "control-label col-md-3"})
                    <div class="col-md-9">
                        @Html.TextBoxFor(model => model.PrecinctCode, new {@class = "form-control"})
                        @Html.ValidationMessageFor(model => model.PrecinctCode, "", new {@class = "text-danger"})
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.FacebookUrl, new {@class = "control-label col-md-3"})
                    <div class="col-md-9">
                        @Html.TextBoxFor(model => model.FacebookUrl, new {@class = "form-control"})
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.TwitterUrl, new {@class = "control-label col-md-3"})
                    <div class="col-md-9">
                        @Html.TextBoxFor(model => model.TwitterUrl, new {@class = "form-control"})
                    </div>
                </div>
                <hr/>

                <div class="form-group">
                    <div class="col-md-offset-2">
                        <span>URL Example: </span><label>constantiafibre.co.za</label> or <label>lynnwoodfibre.com</label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-3 control-label" for="">Referrer URL</label>
                    <div class="col-md-9">
                        <input name="Urls[0].URL" class="form-control" type="text" value=""/>
                    </div>
                </div>

                <div class="clone"></div>

                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-3">
                        <input id="addUrl" class="btn btn-default" type="button" value="Add URL"/>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-3">
                        <input class="btn btn-success" type="submit" value="Create"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(function () {
            //preview uploaded image
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    var file = input.files[0];
                    reader.readAsDataURL(file);

                    var image = new Image();

                    reader.onload = function (e) {
                        image.src = e.target.result;

                        image.onload = function () {
                            var w = this.width,
                                h = this.height,
                                s = ~~(file.size / 1024) + 'KB';
                            $('#imgDetails').html("<p>width: " + w + "</p><p>height: " + h + "</p><p>size: " + s + "</p>");

                            if (s > 2000) {
                                alert.show("file size of " + s + " is too large. <br/> Recommended size is under 300 KB");
                            }

                            $('#imgPreview').attr('src', e.target.result);

                            //set the package preview image to the uploaded image
                            $('.logo').css('background', 'transparent url(' + e.target.result + ') center no-repeat');
                            $('#imgPreviewContainer').show();
                            $('#currentImage').hide();
                        }
                    }
                }
            }

            $("#uploadContainer").on('change', '#ImgInput', function () {
                readURL(this);
            });

            //keep new image; discard old
            $('#keepCurImg').on('click', function () {
                $('#uploadContainer').empty();
                $('#uploadContainer').html('<input id="ImgInput" type="file" name="upload" />');
                $('#imgPreviewContainer').hide();
                $('#currentImage').show();
            });

            var index = 1;
            $('#addUrl').click(function () {
                var content = "<div class=\"form-group clone\"><label class=\"col-md-3 control-label\">Referrer URL</label><div class=\"col-md-9\"><input name=\"Urls["+index+"].URL\" class=\"form-control\" type=\"text\"/></div></div>";
                $('.clone:last').after(content);
                index++;
            });

            $('#createPortalForm').submit(function() {
                if ($('#ImgInput')[0].content.length < 1) {
                    alert("You must upload a cover image for the portal");
                    return false;
                }
            });
        });
    </script>
}